<template>
  <div class="on-site-highlights">
    <!-- 页面标题 -->
    <div class="page-header">
      <div class="container">
        <h1 class="page-title">现场集锦</h1>
        <p class="page-subtitle">回顾往届展会的精彩瞬间</p>
      </div>
    </div>

    <div class="container">
      <!-- FAIR plus 2025 -->
      <section class="highlight-section">
        <h2 class="section-title">FAIR plus 2025</h2>
        <div class="highlight-content">
          <!-- 精彩回顾 -->
          <div class="review-section">
            <h3 class="subsection-title">精彩回顾</h3>
            <div class="review-gallery">
              <div class="review-item" v-for="item in fair2025Reviews" :key="item.id">
                <div class="review-image">
                  <img :src="item.image" :alt="item.title">
                </div>
                <div class="review-content">
                  <h4 class="review-title">{{ item.title }}</h4>
                  <p class="review-description">{{ item.description }}</p>
                  <span class="review-date">{{ item.date }}</span>
                </div>
              </div>
            </div>
          </div>

          <!-- 视频集锦 -->
          <div class="video-section">
            <h3 class="subsection-title">视频集锦</h3>
            <div class="video-gallery">
              <div class="video-item" v-for="video in fair2025Videos" :key="video.id">
                <div class="video-thumbnail">
                  <img :src="video.thumbnail" :alt="video.title">
                  <div class="video-overlay">
                    <button class="play-btn" @click="playVideo(video)">
                      <i class="el-icon-video-play"></i>
                    </button>
                  </div>
                </div>
                <div class="video-content">
                  <h4 class="video-title">{{ video.title }}</h4>
                  <p class="video-duration">{{ video.duration }}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- FAIR plus 2026 -->
      <section class="highlight-section">
        <h2 class="section-title">FAIR plus 2026</h2>
        <div class="highlight-content">
          <!-- 精彩回顾 -->
          <div class="review-section">
            <h3 class="subsection-title">精彩回顾</h3>
            <div class="review-gallery">
              <div class="review-item" v-for="item in fair2026Reviews" :key="item.id">
                <div class="review-image">
                  <img :src="item.image" :alt="item.title">
                </div>
                <div class="review-content">
                  <h4 class="review-title">{{ item.title }}</h4>
                  <p class="review-description">{{ item.description }}</p>
                  <span class="review-date">{{ item.date }}</span>
                </div>
              </div>
            </div>
          </div>

          <!-- 视频集锦 -->
          <div class="video-section">
            <h3 class="subsection-title">视频集锦</h3>
            <div class="video-gallery">
              <div class="video-item" v-for="video in fair2026Videos" :key="video.id">
                <div class="video-thumbnail">
                  <img :src="video.thumbnail" :alt="video.title">
                  <div class="video-overlay">
                    <button class="play-btn" @click="playVideo(video)">
                      <i class="el-icon-video-play"></i>
                    </button>
                  </div>
                </div>
                <div class="video-content">
                  <h4 class="video-title">{{ video.title }}</h4>
                  <p class="video-duration">{{ video.duration }}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- 视频播放模态框 -->
      <el-dialog
        v-model="videoDialogVisible"
        :title="currentVideo?.title"
        width="80%"
        :before-close="closeVideoDialog"
      >
        <div class="video-player">
          <video
            v-if="currentVideo"
            :src="currentVideo.videoUrl"
            controls
            autoplay
            class="video-element"
          >
            您的浏览器不支持视频播放
          </video>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'

export default {
  name: 'OnSiteHighlights',
  setup() {
    // FAIR plus 2025 精彩回顾
    const fair2025Reviews = ref([
      {
        id: 1,
        title: '开幕式盛况',
        description: '2025年展会开幕式现场，来自全球的展商和观众齐聚一堂...',
        image: '/images/highlights/2025-opening.jpg',
        date: '2025-03-15'
      },
      {
        id: 2,
        title: '技术论坛现场',
        description: '机器人产业技术创新论坛现场，专家分享最新技术趋势...',
        image: '/images/highlights/2025-forum.jpg',
        date: '2025-03-16'
      },
      {
        id: 3,
        title: '展商交流活动',
        description: '展商之间的深入交流，促进产业合作与发展...',
        image: '/images/highlights/2025-exchange.jpg',
        date: '2025-03-17'
      },
      {
        id: 4,
        title: '观众参观热潮',
        description: '展会期间观众参观热情高涨，现场人潮涌动...',
        image: '/images/highlights/2025-visitors.jpg',
        date: '2025-03-18'
      }
    ])

    // FAIR plus 2025 视频集锦
    const fair2025Videos = ref([
      {
        id: 1,
        title: 'FAIR plus 2025 展会宣传片',
        thumbnail: 'https://images.pexels.com/photos/3861970/pexels-photo-3861970.jpeg?auto=compress&cs=tinysrgb&w=400&h=250&fit=crop&crop=center',
        videoUrl: 'https://sample-videos.com/zip/10/mp4/SampleVideo_1280x720_1mb.mp4',
        duration: '3:45'
      },
      {
        id: 2,
        title: '开幕式精彩瞬间',
        thumbnail: 'https://images.pexels.com/photos/3861971/pexels-photo-3861971.jpeg?auto=compress&cs=tinysrgb&w=400&h=250&fit=crop&crop=center',
        videoUrl: 'https://sample-videos.com/zip/10/mp4/SampleVideo_1280x720_2mb.mp4',
        duration: '5:20'
      },
      {
        id: 3,
        title: '技术论坛回顾',
        thumbnail: 'https://images.pexels.com/photos/3861973/pexels-photo-3861973.jpeg?auto=compress&cs=tinysrgb&w=400&h=250&fit=crop&crop=center',
        videoUrl: 'https://sample-videos.com/zip/10/mp4/SampleVideo_1280x720_5mb.mp4',
        duration: '8:15'
      }
    ])

    // FAIR plus 2026 精彩回顾
    const fair2026Reviews = ref([
      {
        id: 1,
        title: '2026年展会亮点',
        description: '2026年展会规模进一步扩大，参展商数量创历史新高...',
        image: '/images/highlights/2026-highlights.jpg',
        date: '2026-03-20'
      },
      {
        id: 2,
        title: 'AI机器人展示',
        description: '人工智能与机器人融合展示，展现未来科技发展方向...',
        image: '/images/highlights/2026-ai.jpg',
        date: '2026-03-21'
      },
      {
        id: 3,
        title: '国际合作签约',
        description: '多国企业现场签约，推动机器人产业国际化发展...',
        image: '/images/highlights/2026-contract.jpg',
        date: '2026-03-22'
      },
      {
        id: 4,
        title: '闭幕式盛况',
        description: '2026年展会圆满闭幕，为下一届展会奠定坚实基础...',
        image: '/images/highlights/2026-closing.jpg',
        date: '2026-03-23'
      }
    ])

    // FAIR plus 2026 视频集锦
    const fair2026Videos = ref([
      {
        id: 1,
        title: 'FAIR plus 2026 展会宣传片',
        thumbnail: 'https://images.pexels.com/photos/3861975/pexels-photo-3861975.jpeg?auto=compress&cs=tinysrgb&w=400&h=250&fit=crop&crop=center',
        videoUrl: 'https://sample-videos.com/zip/10/mp4/SampleVideo_1280x720_1mb.mp4',
        duration: '4:10'
      },
      {
        id: 2,
        title: 'AI机器人技术展示',
        thumbnail: 'https://images.pexels.com/photos/3861982/pexels-photo-3861982.jpeg?auto=compress&cs=tinysrgb&w=400&h=250&fit=crop&crop=center',
        videoUrl: 'https://sample-videos.com/zip/10/mp4/SampleVideo_1280x720_2mb.mp4',
        duration: '6:30'
      },
      {
        id: 3,
        title: '国际合作签约仪式',
        thumbnail: 'https://images.pexels.com/photos/3861977/pexels-photo-3861977.jpeg?auto=compress&cs=tinysrgb&w=400&h=250&fit=crop&crop=center',
        videoUrl: 'https://sample-videos.com/zip/10/mp4/SampleVideo_1280x720_5mb.mp4',
        duration: '7:45'
      }
    ])

    // 视频播放相关
    const videoDialogVisible = ref(false)
    const currentVideo = ref(null)

    // 播放视频
    const playVideo = (video) => {
      currentVideo.value = video
      videoDialogVisible.value = true
    }

    // 关闭视频对话框
    const closeVideoDialog = () => {
      videoDialogVisible.value = false
      currentVideo.value = null
    }

    return {
      fair2025Reviews,
      fair2025Videos,
      fair2026Reviews,
      fair2026Videos,
      videoDialogVisible,
      currentVideo,
      playVideo,
      closeVideoDialog
    }
  }
}
</script>

<style scoped>
.on-site-highlights {
  min-height: 100vh;
  background: #f8f9fa;
  margin-top: 0;
  padding-top: 0;
}

.page-header {
  background: linear-gradient(135deg, #320063 0%, #4a0a8a 100%);
  color: white;
  padding: 120px 0 80px 0;
  text-align: center;
  margin-top: 0;
}

.page-title {
  font-size: 48px;
  margin-bottom: 20px;
}

.page-subtitle {
  font-size: 18px;
  opacity: 0.9;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.highlight-section {
  background: white;
  margin: 30px 0;
  padding: 40px;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.section-title {
  font-size: 2rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 30px;
  text-align: center;
  position: relative;
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 2px;
}

.highlight-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

.subsection-title {
  font-size: 1.4rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 20px;
  position: relative;
  padding-left: 15px;
}

.subsection-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 2px;
}

/* 精彩回顾样式 */
.review-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.review-item {
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.review-item:hover {
  transform: translateY(-5px);
}

.review-image {
  height: 180px;
  overflow: hidden;
}

.review-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.review-content {
  padding: 15px;
}

.review-title {
  font-size: 1rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 8px;
  line-height: 1.4;
}

.review-description {
  color: #666;
  font-size: 0.9rem;
  line-height: 1.5;
  margin-bottom: 10px;
}

.review-date {
  color: #999;
  font-size: 0.8rem;
}

/* 视频集锦样式 */
.video-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.video-item {
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
  cursor: pointer;
}

.video-item:hover {
  transform: translateY(-5px);
}

.video-thumbnail {
  position: relative;
  height: 160px;
  overflow: hidden;
}

.video-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.video-item:hover .video-overlay {
  opacity: 1;
}

.play-btn {
  background: rgba(255, 255, 255, 0.9);
  border: none;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.play-btn:hover {
  transform: scale(1.1);
}

.play-btn i {
  font-size: 24px;
  color: #667eea;
}

.video-content {
  padding: 15px;
}

.video-title {
  font-size: 1rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 5px;
  line-height: 1.4;
}

.video-duration {
  color: #999;
  font-size: 0.8rem;
}

/* 视频播放器样式 */
.video-player {
  text-align: center;
}

.video-element {
  width: 100%;
  max-width: 800px;
  height: auto;
  border-radius: 8px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .page-title {
    font-size: 2rem;
  }
  
  .highlight-section {
    padding: 20px;
  }
  
  .highlight-content {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  
  .review-gallery,
  .video-gallery {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .container {
    padding: 0 15px;
  }
  
  .highlight-section {
    padding: 15px;
  }
}
</style> 